<template>
  <div>
    <div class="login">
      <div class="img">
        <div>
          <img :src="txtdata.configPicUrl" alt="" />
          <ul>
            <li v-for="item in txtlist" :key="item.id">{{ item }}</li>
            <!-- <li>商用授权，安心使用</li> -->
          </ul>
        </div>
      </div>
      <div class="pt-12 px-10 fromlayer">
        <div class="login-title">
          <h3>{{ isloginfun ? "登录" : "注册" }}</h3>
          <el-button @click="handleClose" circle
            ><i class="iconfont">&#xe60e;</i></el-button
          >
        </div>
        <LoginLayer
          :isloginfun="isloginfun"
          @update:value="updateParentValue"
        ></LoginLayer>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, defineEmits } from "vue";
// import { ElMessageBox } from "element-plus";
import LoginLayer from "./LoginLayer.vue";
import { useUserStore } from "@/store/loginStore";
import { LoginTextType } from "@/common/utils/loginTpye";
const userStore = useUserStore();
const props = defineProps({
  // isOpen: {
  //   type: Boolean,
  // },
});
const isloginfun = ref(true); //是否是登录
const updateParentValue = (newValue: boolean) => {
  isloginfun.value = newValue;
};

const emits = defineEmits(["colseLogin"]);
const handleClose = (done: () => void) => {
  emits("colseLogin", false);
};
// 获取登录页面文字
const txtdata = ref<LoginTextType | any>(null);
const txtlist = ref<string[] | any>([]);

userStore.getLoginTxt();
txtdata.value = userStore.loginTxt;
txtlist.value = userStore.loginTxt?.configValue.split(";");
</script>

<style lang="scss">
#modelLogin .el-dialog {
  padding: 0;
  border-radius: 15px;
  overflow: hidden;
  header {
    display: none;
  }
  .el-input__inner {
    height: 40px;
  }
}

.login {
  display: flex;
  .img {
    overflow: hidden;
    display: block;
    width: 300px;
    // background: url(../assets/img/login.jpg) center top / cover no-repeat;
    background-image: linear-gradient(to right, #20130d, #2e1b14);
    border-radius: 10px 0px 0px 10px;
    height: 540px;
    > div {
      padding: 20px;
      color: #fff;
      display: grid;
      place-items: center; /* 水平和垂直居中 */
      height: 540px; /* 容器高度 */
      > img {
        width: 100%;
      }
      li {
        font-size: 16px;
        font-weight: bold;
        padding-bottom: 10px;
      }
    }
  }
  .fromlayer {
    width: 600px;
  }
  .login-title {
    text-align: center;
    position: relative;
    padding-bottom: 20px;
    .el-button {
      position: absolute;
      right: -20px;
      top: -30px;
    }
    h3 {
      font-size: 20px;
      color: #000;
    }
  }
}
</style>
